<template>
  <view class="flex align-center m-tab">
    <view
      class="m-tab__item c333 font28"
      :class="{
        active: index === current,
      }"
      v-for="(item, index) in list"
      :key="index"
      @click="$emit('change', { index, item })"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },

    current: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style lang="scss" scoped>
.m-tab {
  justify-content: space-between;
  &__item {
    position: relative;
    padding-bottom: 4rpx;
    padding: 0 12rpx;
  }

  .active {
    color: #582aff;

    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 4rpx;
      bottom: -4rpx;
      left: 0;
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        #582aff 49%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }
}
</style>